<template>
  <div class="category-page">
    <div class="category-header">
      <div class="search-bar">
        <input type="text" placeholder="搜索商品" v-model="searchQuery" />
        <div class="search-icon"></div>
      </div>
    </div>
    
    <div class="category-container">
      <div class="category-sidebar">
        <div 
          v-for="(category, index) in categories" 
          :key="index"
          class="sidebar-item"
          :class="{ active: activeCategory === index }"
          @click="activeCategory = index"
        >
          {{ category.name }}
        </div>
      </div>
      
      <div class="category-content">
        <div class="category-banner">
          <img :src="categories[activeCategory].banner" alt="Category banner" />
        </div>
        
        <div class="subcategories">
          <div 
            v-for="(subcategory, index) in categories[activeCategory].subcategories" 
            :key="index"
            class="subcategory-item"
          >
            <div class="subcategory-image">
              <img :src="subcategory.image" alt="Subcategory" />
            </div>
            <div class="subcategory-name">{{ subcategory.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const searchQuery = ref('');
const activeCategory = ref(0);

// mock 分类和子分类数据
const categories = ref([
  {
    name: '女装',
    banner: 'https://dummyimage.com/300x100/cccccc/000000&text=女装',
    subcategories: [
      { name: '连衣裙', image: 'https://dummyimage.com/80x80/cccccc/000000&text=连衣裙' },
      { name: 'T恤', image: 'https://dummyimage.com/80x80/cccccc/000000&text=T恤' },
      { name: '牛仔裤', image: 'https://dummyimage.com/80x80/cccccc/000000&text=牛仔裤' },
      { name: '衬衫', image: 'https://dummyimage.com/80x80/cccccc/000000&text=衬衫' },
      { name: '外套', image: 'https://dummyimage.com/80x80/cccccc/000000&text=外套' },
      { name: '半身裙', image: 'https://dummyimage.com/80x80/cccccc/000000&text=半身裙' }
    ]
  },
  {
    name: '男装',
    banner: 'https://dummyimage.com/300x100/cccccc/000000&text=男装',
    subcategories: [
      { name: 'T恤', image: 'https://dummyimage.com/80x80/cccccc/000000&text=T恤' },
      { name: '衬衫', image: 'https://dummyimage.com/80x80/cccccc/000000&text=衬衫' },
      { name: '裤子', image: 'https://dummyimage.com/80x80/cccccc/000000&text=裤子' },
      { name: '外套', image: 'https://dummyimage.com/80x80/cccccc/000000&text=外套' }
    ]
  },
  {
    name: '鞋包',
    banner: 'https://dummyimage.com/300x100/cccccc/000000&text=鞋包',
    subcategories: [
      { name: '女鞋', image: 'https://dummyimage.com/80x80/cccccc/000000&text=女鞋' },
      { name: '男鞋', image: 'https://dummyimage.com/80x80/cccccc/000000&text=男鞋' },
      { name: '女包', image: 'https://dummyimage.com/80x80/cccccc/000000&text=女包' },
      { name: '双肩包', image: 'https://dummyimage.com/80x80/cccccc/000000&text=双肩包' }
    ]
  },
  {
    name: '数码',
    banner: 'https://dummyimage.com/300x100/cccccc/000000&text=数码',
    subcategories: [
      { name: '手机', image: 'https://dummyimage.com/80x80/cccccc/000000&text=手机' },
      { name: '电脑', image: 'https://dummyimage.com/80x80/cccccc/000000&text=电脑' },
      { name: '相机', image: 'https://dummyimage.com/80x80/cccccc/000000&text=相机' },
      { name: '配件', image: 'https://dummyimage.com/80x80/cccccc/000000&text=配件' }
    ]
  },
  {
    name: '美妆',
    banner: 'https://dummyimage.com/300x100/cccccc/000000&text=美妆',
    subcategories: [
      { name: '护肤', image: 'https://dummyimage.com/80x80/cccccc/000000&text=护肤' },
      { name: '彩妆', image: 'https://dummyimage.com/80x80/cccccc/000000&text=彩妆' },
      { name: '香水', image: 'https://dummyimage.com/80x80/cccccc/000000&text=香水' }
    ]
  }
]);
</script>

<style scoped>
.category-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
}

.category-header {
  padding: 10px;
  background-color: #fff;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 20px;
  padding: 6px 12px;
  position: relative;
}

.search-bar input {
  border: none;
  background-color: transparent;
  width: 100%;
  font-size: 14px;
  outline: none;
  padding-right: 20px;
}

.search-icon {
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  background-size: contain;
  position: absolute;
  right: 12px;
}

.loading-indicator {
  text-align: center;
  padding: 20px;
  color: #666;
}

.loading-indicator.small {
  padding: 10px;
  font-size: 14px;
}

.error-message {
  text-align: center;
  padding: 20px;
  color: #ff0000;
  background-color: #ffeeee;
  margin: 10px;
  border-radius: 4px;
}

.category-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.category-sidebar {
  width: 80px;
  background-color: #f9f9f9;
  overflow-y: auto;
  height: 100%;
  flex-shrink: 0;
}

.sidebar-item {
  padding: 15px 5px;
  text-align: center;
  font-size: 14px;
  color: #666;
  border-bottom: 1px solid #eee;
}

.sidebar-item.active {
  background-color: #fff;
  color: #ff6b35;
  font-weight: bold;
  position: relative;
}

.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 16px;
  width: 3px;
  background-color: #ff6b35;
}

.category-content {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background-color: #fff;
}

.category-banner {
  width: 100%;
  height: 100px;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 15px;
}

.category-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subcategories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.subcategory-item {
  width: 20%; /* Adjust as needed for 5 columns */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.subcategory-image {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 5px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.subcategory-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subcategory-name {
  font-size: 12px;
  color: #333;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style> 